<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="description" content="Flutter Summernote HTML Editor">
  <meta name="author" content="xrb21">
  <title>Summernote Text Editor HTML</title>
  <script src="jquery-3.4.1.slim.min.js"></script>
  <link href="summernote-lite.min.css" rel="stylesheet">
  <script src="summernote-lite.min.js"></script>
</head>
<body>
<div id="summernote" style="width:100%;height:100%"></div>
<script>
      $('#summernote').summernote({
        placeholder: "&nbsp;",
        tabsize: 2,
        toolbar: [
          ['style', ['style']],
          ['font', ['bold', 'underline', 'italic']],
          ['color', ['color']],
          ['para', ['ul', 'ol', 'paragraph']],
          ['insert', ['link', 'picture', 'hr', 'video']],
          ['view', ['codeview']]
        ],
        disableGrammar: false,
        spellCheck: false
      });
    </script>
<style>
      body {
          display: block;
          margin: 0px;
      }
      .note-editor.note-airframe, .note-editor.note-frame {
          border: 0px solid #a9a9a9;
      }
      .note-editor .note-editing-area {
          position: relative;
          height: 80%;
      }
      .note-frame {
          border-radius: 0px;
      }
      .note-editable {
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 20px;
        padding-left: 10px;

      }

    </style>
</body>
</html>